<template>
  <view>
    <u-radio-group v-if="styleType==0" v-model="value" :value="value" @change="radioGroupChange" >
      <u-radio
        v-for="(item, index) in list"
        :key="index"
        :name="item[valueName]"
        :disabled="item.disabled"
      >
        {{ item[labelName] }}
      </u-radio>
    </u-radio-group>

    <u-radio-group v-if="styleType==1" v-model="value" :value="value" @change="radioGroupChange">
      <view class="radio-style-one">
        <u-radio
          v-for="(item, index) in list"
          :key="index"
          :class="[value===item[valueName]?'active-radio':'inactive-radio',item.disabled?'disabled-radio':'']"
          :name="item[valueName]"
          :disabled="item.disabled"
        >
          {{ item[labelName] }}
        </u-radio>
      </view>
    </u-radio-group>
  </view>
</template>

<script>
export default {
  name: "yer-radio",
  props: {
    list: {
      type: Array,
      default: () => [],
    }, //字典的数组集合
    defaultValue: "", //默认显示的字典，传字典的代码项
    defaultValueExtra: "", //默认显示的字典，传字典的代码项
    inputAlign: {
      type: String,
      default: "left",
    }, //input内容对齐方式三种：left  center  right  默认left
    placeholder: {
      type: String,
      default: "请选择",
    },
    labelName: {
      type: String,
      default: "label",
    },
    valueName: {
      type: String,
      default: "value",
    },
    styleType: {
      type: [Number, String],
      default: 0
    }
  },
  emits: ["update:modelValue","update:label", "input"],
  data() {
    return {
      showValue: "",
      value: "", //字典展示的值，对应的是字典名称
      show: false, //控制select弹框的显示
      defaultVal: [0], //默认值（是字典数组的下标）
    };
  },
  methods: {
    radioGroupChange(e) {
			// console.log(e);
      this.$emit('update:modelValue',e)
      this.$emit('input',e)
		},
    translateDict(value){
      const _this = this
      for(let i=0;i<this.list.length;i++){
        const item = this.list[i]
        if(item[_this.valueName] == value){
          return item[_this.labelName]
        }
      }
    },
  },
  watch: {
    // value: {
    //   immediate: true,
    //   handler: function (newVal, oldVal) {
    //     this.$emit("update:modelValue", newVal);
    //     this.$emit("update:label", this.translateDict(newVal));
    //     this.$emit("input", newVal);
    //   }
    // },
    defaultValue: {
      immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal == 0) {
          this.value = newVal + "";
        } else {
          this.value = newVal;
        }
      },
    }
  },
};
</script>

<style lang="scss" scoped>
.radio-style-one{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  .u-radio-group{
    margin: 0 auto;
  }
  .u-radio{
    padding: 8rpx 0;
    justify-content: center;
    border-radius: 6rpx;
  }
  ::v-deep .u-radio__label{
    color:#b3b3b3;
  }
  ::v-deep .u-radio__icon-wrap{
    display: none;
  }
  ::v-deep .u-radio__icon-wrap--checked + .u-radio__label{
    color:#164cc7;
  }
  ::v-deep .u-radio__icon-wrap--disabled + .u-radio__label{
    color:#8f8f8f;
  }
  ::v-deep .active-radio{
    border: 1rpx solid #164cc7;
    background:#f3f7ff;
  }
  ::v-deep .inactive-radio{
    border: 1rpx solid #d8d8d8;
    background:#fff;
  }
  ::v-deep .disabled-radio{
    background:#e8e8e8;
  }
}
</style>
